<template>
	<view>
		<uni-segmented-control :current="current" :values="tabitem" :style-type="styleType" :active-color="activeColor"
			@clickItem="onClickItem"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<personUnfinish></personUnfinish>
			</view>
			<view v-show="current === 1">
				<personComplete></personComplete>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs
	} from 'vue'
	import personUnfinish from '../component/PersonUnfinished.vue'
	import personComplete from '../component/PersonComplete.vue'
	export default {
		components:{
			personUnfinish,
			personComplete
		},
		setup() {
			let data = reactive({
				current: 0,
				tabitem: ['待上课', '已完成'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				onClickItem(e) {
					if (data.current !== e.currentIndex) {
						data.current = e.currentIndex
						console.log(data.current)
					}
				},
				styleChange(e) {
					if (data.styleType !== e.detail.value) {
						data.styleType = e.detail.value
					}
				},
				colorChange(e) {
					if (data.styleType !== e.detail.value) {
						console.log(e.detail.value);
						data.activeColor = e.detail.value
					}
				}
			})
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="scss">

</style>
